<style module>
	.contextmenuContainer{
		display: block;
		overflow: visible;
		margin: 5px 0;
		padding: 5px 0;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 4px;
		box-shadow: 0 1px 6px rgba(0,0,0,.2);
		position: fixed;
		z-index: 900;
	}
	.contextmenuItems{
		margin: 0;
		line-height: normal;
		padding: 7px 16px;
		clear: both;
		color: #515a6e;
		font-size: 14px;
		white-space: nowrap;
		list-style: none;
		cursor: pointer;
		transition: background .2s ease-in-out;
	}
</style>
<template>
	<div :class="$style.contextmenuContainer" :style="{display:e.show?'block':'none',left:e.clientX+'px',top:e.clientY+'px'}">
    <Divider v-if="!!title" style="margin:4px 0;">{{title}}</Divider>
    <Menu mode="vertical" style="width:auto;" @on-select="$emit('on-select',$event)">
      <slot></slot>
    </Menu>
  </div>
</template>
<script>
	export default {
		name:'starMenu',
		props:{
			title:{
				default:()=>''
			},
      e:{
			  default:()=>{
          return {
            show:false,
            clientX:0,
            clientY:0
          }

        }
      }
		},
		computed:{
			menuList(){
				let items=[];
				this.menu.items.forEach(function(item){
					if(item.show){
						items.push(item)
					}
				});
				return items;
			}
		},
		methods:{
			
		}
	}
</script>